<template>
  <Popup v-model:show="showModal" :title="props.title || '车型'" @submit="onSubmit" @cancel="onCancel" canceltext="清空选项">
    <view class="series-list">
      <view :class="`series-item ${paramsInfo.carType === itm.id && 'series-active'}`" v-for="(itm) in list" :key="itm.id"
        @click="paramsInfo.carType = itm.id">
        <view class="item-count">{{ itm.title }}</view>
      </view>
      <!-- <view class="series-item series-active">
          <view class="item-count">SUV</view>
        </view> -->
    </view>
    <!-- <NoData :list="pagingInfo.list" title="暂无数据" :loading="pagingInfo.loading" :total="pagingInfo.total" /> -->
  </Popup>
</template>

<script setup>
import { watch, ref } from "vue"
import Popup from "@/components/ui/popup"
import { useShowModal } from "@/path/hooks/v-model"
import NoData from "@/components/tool/no-data"
import service from "@/path/service"
import { usePagingQuery } from "@/path/hooks";
import { debounce } from "@/path/until";
const props = defineProps({
  show: Boolean,
  title: String,
  params: Object,
})
const emit = defineEmits(['update:show', 'update:params'])
const { showModal } = useShowModal(props, emit)
const list = ref([
  { title: "轿车", id: 1 },
  { title: "SUV", id: 2 },
])
// function getList(params) {
//   return service.get("api/ycg/car/carmodel", params)
// }

// const { pagingInfo, initPagingQuery, loadPagingMore } = usePagingQuery(getList, {
//   pageSize: 20,
// })
// initPagingQuery()
// const debounceInitList = debounce(() => {
//   initPagingQuery()
// }, 200)

// watch(() => props?.params, (ev) => {
//   paramsInfo.value = ev;
//   debounceInitList()
// }, { immediate: true, deep: true });
const paramsInfo = ref(props?.params || {})
watch(() => props?.params, () => {
  paramsInfo.value = { ...(props?.params || {}) };
}, { immediate: true, deep: true });
function onSubmit() {
  emit("update:params", { ...paramsInfo.value });
  const _item = (list.value || []).find(v => v.id === paramsInfo.value.carType)
  emit("update:name", _item.title);
}
function onCancel() {
  emit("update:params", null);
  emit("update:name", "");
}
</script>

<style lang="less" scoped>
.series-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 18rpx;

  .series-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32rpx;
    padding: 0 18rpx;

    .item-count {
      padding: 16rpx 64rpx;
      background-color: #F7F7F7;
      border-radius: 32rpx;
      font-weight: 400;
      font-size: 32rpx;
      color: #999999;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &.series-active {
      .item-count {
        background-color: #9CDB14;
        font-weight: 700;
        color: #FFFFFF;
      }
    }
  }
}
</style>
